/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面基础样式 */
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

body {
  background: #e3f2fd;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  overflow: auto;
}

/* 图表包装器样式 */
.chart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1800px; /* 增加最大宽度，让横坐标变长 */
  gap: 20px;
}

/* 标题样式 */
.chart-title {
  color: #333;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* 按钮样式 */
.generate-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background: #45a049;
}

.generate-btn:active {
  transform: translateY(1px);
}

/* WebSocket控制样式 */
.websocket-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 2px solid #e9ecef;
  width: 100%;
  max-width: 800px;
}

.connection-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}

.status-connected {
  color: #28a745;
  font-weight: bold;
}

.status-disconnected {
  color: #dc3545;
  font-weight: bold;
}

.status-connecting {
  color: #ffc107;
  font-weight: bold;
}

.connection-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.connection-inputs input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.connection-inputs input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

#ws-ip {
  width: 150px;
}

#ws-port {
  width: 80px;
}

.connect-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.connect-btn:hover {
  background: #0056b3;
}

.connect-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.disconnect-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.disconnect-btn:hover {
  background: #c82333;
}

.disconnect-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

/* 清除按钮样式 */
.clear-btn {
  background: #f44336;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.clear-btn:hover {
  background: #d32f2f;
}

.clear-btn:active {
  transform: translateY(1px);
}

/* 无人机列表按钮样式 */
.uav-list-btn {
  background: #9c27b0;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.uav-list-btn:hover {
  background: #7b1fa2;
}

.uav-list-btn:active {
  transform: translateY(1px);
}

/* 过滤控件样式 */
.filter-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9ecef;
}

.filter-controls input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 150px;
}

.filter-controls input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.filter-btn {
  background: #ff9800;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.filter-btn:hover {
  background: #f57c00;
}

.filter-btn:active {
  transform: translateY(1px);
}

.clear-filter-btn {
  background: #607d8b;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.clear-filter-btn:hover {
  background: #455a64;
}

.clear-filter-btn:active {
  transform: translateY(1px);
}

/* 图表容器样式 - 重新设计 */
#container {
  position: relative;
  width: 100%;
  height: 830px; /* 增加高度确保47行都能显示 */
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  padding: 35px 25px 25px 25px;
  overflow: visible; /* 改为visible，让内容可以超出容器 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-wrapper {
    gap: 15px;
  }
  
  .chart-title {
    font-size: 24px;
  }
  
  #container {
    height: 700px;
    padding: 30px 20px 20px 20px;
  }
}

@media (max-width: 480px) {
  .chart-wrapper {
    gap: 10px;
  }
  
  .chart-title {
    font-size: 20px;
  }
  
  #container {
    height: 600px;
    padding: 25px 15px 15px 15px;
  }
}
  